<!--差弹窗 -->

<template>
    <view class="buyerBidList">
        <!--暂无数据显示-->
        <placeholder class="bidList_zanwu" wx:if="{{is_empty}}" message.sync="暂无发现数据"></placeholder>
        <view class="bidList_entire" wx:if="{{!is_empty}}" wx:for="{{List}}" wx:key="index,item">
            <view class="bidList_zhuangtai">
                <text class="btn">求购中</text>
            </view>
            <view class="bidList_list">
                <view class="bidList_image">
                    <image src='{{item.topicImage}}'></image>
                </view>
                <view class="bidList_name">
                    <view>{{item.goodsName}}</view>
                    <view>{{item.goodsSize}}</view>
                </view>
            </view>
            <view class="bidList_flex">
                <view class="bidList_flex1 backf5f5f9">
                    <text>卖家最低售价</text>
                    <view class="border-right" style="background: #fff"></view>
                </view>
                <view class="bidList_flex2 backf5f5f9">
                    <view class="bidList_pire">￥
                        <text>{{item.minSellerOfferAmount}}</text>
                    </view>
                </view>
                <view class="bidList_flex3 backe6e6e6">
                    <text>买家最高出价</text>
                    <view class="border-right" style="background: #fff"></view>
                </view>
                <view class="bidList_flex4 backe6e6e6">
                    <view class="bidList_pire">￥
                        <text>{{item.maxBuyerOfferAmount}}</text>
                    </view>
                </view>
            </view>
            <view class="bidList_flex">
                <view class="bidList_flex1 back_fff">
                    <text>我的出价</text>
                    <view class="border-right" style="background: #e6e6e6"></view>
                </view>
                <view class="bidList_flex2 back_fff">
                    <view class="bidList_pire inputPri color_org">
                        <view class="diVain" style="width: 20rpx">
                            ￥
                        </view>
                        <input class="diVain" style="width: 200rpx;text-align: left;" type="text" value="{{item.meOffer}}" bindinput="getPrice" data-length="{{index}}">
                    </view>
                </view>
                <view class="bidList_flex3 back_fff">
                    <view class="modification">
                        <view @tap="updatePrice" data-id="{{item.offerId}}" data-price="{{item.meOffer}}">
                            <i class="iconfont icon-bianji"></i>
                        </view>
                        <view @tap="updatePrice" data-id="{{item.offerId}}" data-price="{{item.meOffer}}">修改</view>
                    </view>
                </view>
                <view class="bidList_flex4 back_fff">
                    <view class="modification">
                        <view @tap="deletePrice" data-id="{{item.offerId}}">
                            <i class="iconfont icon-chexiao2-copy"></i>
                        </view>
                        <view @tap="deletePrice" data-id="{{item.offerId}}">撤销</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import wepy from 'wepy'
    import api from '@/api/api'
    import tip from '@/utils/tip'
    import {USER_INFO, USER_SPECICAL_INFO} from '@/utils/constant'
    import Placeholder from '../../components/common/placeholder'
    export default class record extends wepy.page {
      config = {
        // 配置当前页面
        navigationBarTitleText: '买家出价列表' // 头部标题
      }

      components = {
        placeholder: Placeholder
      }

      data = {
        List: [],
        form: {
          page: 1,
          limit: 10
        },
        page_total: '',
        is_empty: false
      }

      methods = {
        // 方法
        updatePrice(e) {
          const t = this
          let p = e.currentTarget.dataset.price,
            id = e.currentTarget.dataset.id,
            reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/
          if (!p) {
            tip.alert('出价不能为空')
          } else if (!reg.test(p)) {
            tip.alert('我的出价必须为数字金额')
          } else {
            wx.showModal({
              content: '确认修改？',
              confirmText: '修改',
              success(r) {
                if (r.confirm) {
                  t.UpdateOfferFun(p, id)
                }
              }
            })
          }
        },
        getPrice(e) {
          const t = this
          let l = e.currentTarget.dataset.length
          t.List[l]['meOffer'] = e.detail.value
        },
        deletePrice(e) {
          const t = this
          let id = e.currentTarget.dataset.id
          wx.showModal({
            content: '您确认撤销吗？',
            success(r) {
              if (r.confirm) {
                t.goodsUndoFun(id)
              }
            }
          })
        }
      }
      onLoad() {
        const t = this
        let userId = wx.getStorageSync('userId')
        t.form['params["userId"]'] = userId
        t.getChildCate()
      }
      events = {}
      async getChildCate(type) {
        const t = this
        const a = await api.goodsListMeBuy({
          query: t.form
        })
        if (a.data.code == 0) {
          t.page_total = Math.ceil(a.data.data.total / t.form['limit'])
          t.form['page'] = a.data.data.page
          if (type) {
            t.List = [...t.List, ...a.data.data.rows]
          } else {
            t.List = a.data.data.rows
          }
          if (!t.List || t.List[0] == null || t.List.length == 0) {
            t.is_empty = true
          } else {
            t.is_empty = false
          }
          t.$apply()
        } else {
          tip.error(a.data.msg)
        }
      }
      /**
       * 更新出价价格
       * @returns {Promise.<void>}
       */
      async UpdateOfferFun(price, id) {
        const t = this
        const a = await api.goodsUpdateOfferAmount({
          query: {
            amount: price,
            offerId: id,
            userId: t.form['params["userId"]']
          },
          method: 'PUT'
        })
        if (a.data.code == 0) {
          t.getChildCate()
        } else {
          tip.error(a.data.msg)
        }
      }
      /**
       * 撤销出价
       * @returns {Promise.<void>}
       */
      async goodsUndoFun(id) {
        const t = this
        const a = await api.goodsUndo({
          query: {},
          method: 'DELETE'
        },"?offerId="+id+"&userId="+t.form['params["userId"]']);
        if (a.data.code == 0) {
          t.getChildCate()
        } else {
          tip.error(a.data.msg)
        }
      }
      //加载更多
      onReachBottom() {
        let that = this
        that.showLoading = true
        if (that.page_total > that.form['page']) {
          that.form['page']++
          that.getChildCate(1)
        } else {
          that.showLoading = false
        }
      }
    }
</script>
<style lang="less">
.buyerBidList {
    > view:first-child {
        margin-top: 0 !important;
    }
    > view {
        margin-top: 20rpx;
    }
    .bidList_entire {
        .bidList_images{
            text-align: center;
        }
        background: #fff;
        .backf5f5f9 {
            background: #FFA622;
            color: #fff;
        }
        .back_fff {
            background: #fff;
        }
        .backe6e6e6 {
            background: #70B957;
            color: #fff;
        }
        .inputPri {
            width: 240rpx;
        }
        .diVain {
            font-size: 30rpx;
            height: auto;
            color: #ffb025;
            display: inline-block;
            vertical-align: middle;
            padding: 0 5rpx;
        }
        .bidList_zhuangtai {
            text-align: right;
            padding: 20rpx 40rpx;
            margin-left: 20rpx;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;
            .btn {
                display: inline-block;
                padding: 4px 8px;
                color: #fff;
                font-size: 12px;
                line-height: normal;
                border-radius: 8rpx;
                background-color: #ffb025;
            }
        }
        .bidList_list {
            display: flex;
            justify-content: flex-start;
            .bidList_image {
                width: 240rpx;
                height: 240rpx;
                position: relative;
                image {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 200rpx;
                    height: 200rpx;
                    border: 1px solid #ddd;
                }
            }
            .bidList_name {
                padding: 30rpx 0;
            }
        }
        .bidList_flex {
            display: flex;
            justify-content: flex-start;
            .bidList_flex1 {
                width: 30%;
                overflow: hidden;
                padding: 20rpx 0;
                position: relative;
                text {
                    padding-left: 20rpx;
                }
                .border-right {
                    position: absolute;
                    top: 4rpx;
                    right: 0;
                    width: 2rpx;
                    height: 80rpx;
                    color: #fff;
                }
            }
            .bidList_flex2 {
                width: 20%;
                text-align: right;
                padding: 20rpx 0;
                .bidList_pire {
                    font-size: 22rpx;
                    color: #fff;
                    text {
                        padding-right: 20rpx;
                        font-size: 30rpx;
                    }
                }
            }
            .bidList_flex3 {
                width: 30%;
                position: relative;
                padding: 20rpx 0;
                .modification {
                    text-align: right;
                    view:first-child {
                        width: 50rpx;
                        height: 50rpx;
                    }
                    view {
                        display: inline-block;
                        i {
                            vertical-align: middle;
                            font-size: 36rpx;
                            padding-right: 10rpx;
                        }
                        text {
                            padding-left: 0;
                            vertical-align: middle;
                            display: inline-block;
                        }
                    }
                }
                text {
                    padding-left: 20rpx;
                }
                .border-right {
                    position: absolute;
                    top: 4rpx;
                    right: 0;
                    width: 2rpx;
                    height: 80rpx;
                    color: #fff;
                }
            }
            .bidList_flex4 {
                width: 20%;
                text-align: center;
                padding: 20rpx 0;
                .bidList_pire {
                    font-size: 22rpx;
                    color: #fff;
                    text {
                        font-size: 30rpx;
                    }
                }
                .modification {
                    view:first-child {
                        width: 50rpx;
                        height: 50rpx;
                    }
                    view {
                        display: inline-block;
                        i {
                            vertical-align: middle;
                            font-size: 32rpx;
                            padding-right: 10rpx;
                        }
                        text {
                            padding-left: 0;
                            vertical-align: middle;
                            display: inline-block;
                        }
                    }
                }
            }
        }
    }
    .bidList_zanwu {
        padding-top: 300rpx;
    }
}
</style>
